<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>淘票票注册</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/message.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.cookie.js}"></script>
</head>
<body>
<div class="register-div">
    <h1>淘票票注册</h1>
    <form >
        <div class="register-form-item">
            <input type="text" id="username" placeholder="请输入用户名">
        </div>
        <div class="register-form-item">
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        <div class="register-form-item">
            <input type="password" id="password_again" placeholder="请再次输入密码">
        </div>
        <div class="register-form-item">
            <input type="text"  id="phone" placeholder="请输入电话">
        </div>
        <div class="register-form-item">
            <input type="text"  id="code" placeholder="请输入验证码">
            <input type="button" id="btn" disabled="disabled" value="获取验证码">
        </div>
        <button class="btn-register" type="button" id="login">注册</button>
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){//cookie存在倒计时
            timekeeping();
        }else{//cookie 没有倒计时
            $('#btn').attr("disabled", false);
        }
        function timekeeping(){
            //把按钮设置为不可以点击
            $('#btn').attr("disabled", true);
            let interval=setInterval(function(){//每秒读取一次cookie
                //从cookie 中读取剩余倒计时
                let total=$.cookie("total");
                //在发送按钮显示剩余倒计时
                $('#btn').val('请等待'+total+'秒');
                //把剩余总倒计时减掉1
                total--;
                if(total==0){//剩余倒计时为零，则显示 重新发送，可点击
                    //清除定时器
                    clearInterval(interval);
                    //删除cookie
                    total=$.cookie("total",total, { expires: -1 });
                    //显示重新发送
                    $('#btn').val('重新发送');
                    //把发送按钮设置为可点击
                    $('#btn').attr("disabled", false);
                }else{//剩余倒计时不为零
                    //重新写入总倒计时
                    $.cookie("total",total);
                }
            },1000);
        }
        //绑定发送按钮
        $('#btn').click(function(event) {
            //校验手机号码
            let phone=$('#phone').val();
            let pre=/^[1][358][0-9]{9}$/;
            if(phone==''){
                $.message({
                    message:'手机号不能为空!',
                    type:'warning',
                    duration:'2000',
                    showClose:true,
                });
                return this;
            }else{
                let pre=/^[1][358][0-9]{9}$/;
                if(!pre.test(phone)){
                    $.message({
                        message:'手机号码格式有误！',
                        type:'warning',
                        duration:'2000',
                        showClose:true,
                    })
                    return this;
                }
            }
            $.ajax({
                url:'http://localhost:8080/sendSms',
                method:'get',
                dataType:'json',
                data:{phone:phone},
                success:function (res) {
                    if (res.code==200){
                        $.cookie("total",300);
                        timekeeping()
                        $.message({
                            message:'发送成功，请五分钟之内注册',
                            duration:'2000',
                            type:'success'
                        });
                    }
                    if (res.code==201){
                        $.message({
                            message:res.msg,
                            type:'warning',
                            duration:'2000',
                            showClose:true,
                        })
                    }
                    if (res.code==202){
                        $.message({
                            message:res.msg,
                            type:'error',
                            duration:'2000'
                        })
                    }

                    if (res.code==404){
                        $.message({
                            message:res.msg,
                            type:'error',
                            duration:'2000'
                        })
                    }
                    console.log(res);
                }

            })
        });

        //登录
        $('#login').click(function () {
            let username=$('#username').val();
            if (username==null||username==""){
                $.message({
                    message:'用户名不能为空',
                    type:'error',
                    duration:'2000'
                })
                return this;
            }
            let password=$('#password').val();
            let again_password=$('#password_again').val();
            if (password==null||again_password==null||password==""||again_password==""){
                $.message({
                    message:'密码不能为空',
                    type:'error',
                    duration:'2000'
                })
                return this;
            }
            if (password!=again_password){
                $.message({
                    message:'两次密码不相同',
                    type:'error',
                    duration:'2000'
                })
                return this;
            }
            let phone=$('#phone').val();
            let pre=/^[1][358][0-9]{9}$/;
            if(phone==''){
                $.message({
                    message:'手机号不能为空!',
                    type:'warning',
                    duration:'2000',
                    showClose:true,
                });
                return this;
            }else{
                let pre=/^[1][358][0-9]{9}$/;
                if(!pre.test(phone)){
                    $.message({
                        message:'手机号码格式有误！',
                        type:'warning',
                        duration:'2000',
                        showClose:true,
                    })
                    return this;
                }
            }
            let code=$('#code').val();
            if (code==null||code==""){
                $.message({
                    message:'验证码不能为空',
                    type:'error',
                    duration:'2000'
                })
                return this;
            }
            $.ajax({
                url:'http://localhost:8080/user/register',
                method: 'post',
                data:{username:username,password:password,phone:phone,code:code},
                dataType: 'json',
                success:function (res) {
                    if (res.code==200){
                        $.message({
                            message:'注册成功',
                            type:'success',
                            duration:2000
                        })
                        setTimeout(function () {
                            window.location.href="http://localhost:8080/login";
                        },2000)
                    }
                    if (res.code==400){
                        $.message({
                            message:res.msg,
                            type:'error',
                            duration:'2000'
                        })
                    }
                    if (res.code==202){
                        $.message({
                            message:res.msg,
                            type:'warning',
                            duration:'2000'
                        })
                    }
                    console.log(res);
                }
            })


        })

    })
</script>
</body>
</html>
